<template>
  <div class="top-img">
    <img :src="url" alt="" class="img" />
  </div>
  <div class="img-list">
    <el-icon @click="changeImgByBtn(ChangeType.PREV)">
      <ArrowLeftBold />
    </el-icon>
    <div class="img-container">
      <img
        :src="imgBaseUrl + img.imgUrl"
        alt=""
        v-for="(img, index) in imgList"
        v-show="index < 5"
        :key="img.id"
        class="img-list-item"
        @click="changImg(index)"
      />
      <!-- <div v-for="(img, index) in imgList">
        <img
          :src="imgBaseUrl + img.imgUrl"
          alt=""
          v-if="index <= 1"
          :key="img.id"
          class="img-list-item"
        />
      </div> -->
    </div>
    <el-icon @click="changeImgByBtn(ChangeType.NEXT)">
      <ArrowRightBold />
    </el-icon>
  </div>
</template>
<script setup>
import { watch } from "vue";
import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
const imgBaseUrl = window.location.origin;
const url = ref("");

if (props.imgList && props.imgList.length > 0) {
  url.value = imgBaseUrl + props.imgList[0].imgUrl;
}
const props = defineProps({
  imgList: {
    type: Array,
    default: () => [],
  },
});

watch(
  () => props.imgList,
  (val) => {
    console.log(val);
  },
  {
    deep: true,
  }
);

// 切换图片
const currIndex = ref(0);
const ChangeType = Object.freeze({
  PREV: -1,
  NEXT: 1,
});
const changeImgByBtn = (type) => {
  currIndex.value = currIndex.value + type;
  // 判断是否为0，或者最后一个
  if (currIndex.value < 0) {
    currIndex.value = props.imgList.length - 1;
  }
  if (currIndex.value >= props.imgList.length) {
    currIndex.value = 0;
  }
  url.value = imgBaseUrl + props.imgList[currIndex.value].imgUrl;
  console.log("URL", currIndex.value);
};
const changImg = (index) => {
  url.value = imgBaseUrl + props.imgList[index].imgUrl;
  currIndex.value = index;
  console.log("url", url.value);
};
</script>

<style lang="scss" scoped>
.top-img {
  width: 360px;
  height: 360px;
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
.img-list {
  display: flex;
  align-items: center;
  width: 360px;
  overflow: hidden;
  margin-top: 15px;
  .el-icon {
    width: 20px;
    background: rgba(0, 0, 0, 0.2);
    height: 56px;
    color: #fff;
  }
  .img-container {
    flex: 1;
    display: flex;
    justify-content: space-around;
    overflow: hidden;
  }
  .img-list-item {
    width: 56px;
    height: 56px;
    object-fit: cover;
  }
}
</style>
